/*
* 运动元素需要定位
*
* obj 目标对象
* target 目标位置
*
* 1. timer => obj.timer：给不同元素指定不同的定时器
* 2. 不断点击会不断开启定时器，先清除以前的定时器，再开启当前的定时器
* 缓动动画核心算法：（目标值-现在位置）/10，作为每次移动的步长
* 3.1 没有走在正确位置：把步长改成整数
* 3.2 往前走，向上取整；后退，向下取整
* 4. 定时器结束执行，回调函数
* */
function animate(obj, target,callback) {

    /*2. 不断点击会不断开启定时器，先清除以前的定时器，再开启当前的定时器*/
    clearInterval(obj.timer);

    /*1. timer => obj.timer：给不同元素指定不同的定时器*/
    obj.timer = setInterval(function () {
        var step = (target - obj.offsetLeft) / 10;
        /*3.1 没有走在正确位置：把步长改成整数
        * 3.2 往前走，向上取整；后退，向下取整
        * */
        step = step > 0 ? Math.ceil(step) : Math.floor(step);

        if(obj.offsetLeft === target){
            //停止动画的本质 是 停止定时器
            clearInterval(obj.timer);
            if(callback){
                callback();
            };
        }

        /*3.缓动动画*/
        obj.style.left = obj.offsetLeft + step + 'px';

    },15);
};